<template>
	<view class="page">
		<view class="content-box">
			<view class="item-detail" v-for="(item,index) in list" :key="item.id">
				<view class="left-head-img-box"><image :src="item.avatar" mode=""></image></view>
				<view class="right-content">
					<view class="head-name">{{ item.shopname }}</view>
					<view class="nearby-font">
						{{ item.info }}
					</view>
					<view class="nearby-img-content" v-if="item.images.length != 0">
						<view class="item-img-box" v-for="(imgItem, imgIndex) in item.images" :key="imgItem" @click="lookImg(index, imgIndex)"><image :src="$wanlshop.oss(imgItem)" mode="widthFix"></image></view>
					</view>
					<view class="footer-box">
						<view class="time">{{ $wanlshop.timeToDate(item.createtime) }}</view>
						<view class="flex">
							<u-icon name="map-fill"></u-icon>
							<view class="address-desc">{{ item.address }}</view>
						</view>
						<view class="flex">
							<u-icon name="phone-fill"></u-icon>
							<view class="phone">{{ item.mobile }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				total: 0,
				list: [],
				id: 0
			}
		},
		onLoad(option) {
			if(option.id) this.id = option.id
			if(option.name) uni.setNavigationBarTitle({ title: option.name })
			this.initDetail();
		},
		methods: {
			//获取商圈伤情
			initDetail() {
				let self = this;
				let data = { to_shop_id: this.id, page: this.page };
				this.$api.post({
					url: '/wanlshop.shop/shopNewsList',
					data,
					success(res) {
						this.total = res.count;
						res.list.forEach(item => item.images = item.images.split(','))
						self.list.push(...res.list);
					}
				})
			},
			
			//查看图片
			lookImg(index, imgIndex) {
				let imgArr = this.list[index].images;
				let lookImg = []
				imgArr.forEach(item => {
					item = this.$wanlshop.oss(item)
					lookImg.push(item)
				})
				uni.previewImage({
					current: imgIndex,
					urls: lookImg
				})
			}
		}
	}
</script>

<style scoped>
.page {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: #FFFFFF !important;
	overflow-y: scroll;
}
.flex { display: flex; }
.content-box {
	width: 100%;
	display: flex;
	flex-direction: column;
}
.item-detail {
	border-bottom: solid 1rpx #F4F4F4;
	padding: 45rpx 50rpx 35rpx 22rpx;
	width: 100%;
	box-sizing: border-box;
	display: flex;
}
.left-head-img-box {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	overflow: hidden;
	margin-right: 20rpx;
	flex-shrink: 0;
}
.left-head-img-box image {
	width: 100%;
	height: 100%;
}
.right-content {
	width: 100%;
	display: flex;
	flex-direction: column;
}
.head-name {
	font-size: 32rpx;
	line-height: 32rpx;
	color: #FF7200;
	font-weight: bold;
	margin-bottom: 30rpx;
}
.nearby-font {
	font-size: 32rpx;
	color: #0A0A0A;
	font-weight: 500;
	margin-bottom: 40rpx;
}
.nearby-img-content {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 40rpx;
}
.item-img-box {
	margin-right: 15rpx;
	margin-bottom: 15rpx;
	flex: 1;
}
.item-img-box image {
	width: 100%;
	height: 100%;
}
.footer-box {
	width: 100%;
	display: flex;
	justify-content: space-between;
	font-size: 25rpx;
	color: #A0A0A0;
}

.address-desc {
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
	width: 162rpx;
	margin-left: 10rpx;
}
.phone {
	margin-left: 10rpx;
}
</style>
